<template>
<div class="warp">
    <van-nav-bar
    left-text="返回"
    left-arrow
    @click-left="onClickLeft"
    style="background-color: rgba(255,255,255,.34);"
    :border="false"
    />
    <!-- <G_header title="分享"  /> -->
    <!-- <div class="title" v-if="type == 1">
        <h2>無优商城1</h2>
        <h2>让天下创业轻松无忧!</h2>
        <h3>分享人昵称 : {{ userInfo.nickname }} {{ userInfo.id }}</h3>
    </div>
    <div class="title" v-else>
        <h2>無优商城</h2>
        <h2>让天下创业轻松无忧!</h2>
        <h3>分享门店 : {{ storeInfo.title }}</h3>
    </div> -->
    <div class="user-id">
       <h2> ID: {{ userInfo.id }}</h2>
    </div>
    <div id="qrCode">
        <div id='code'></div>
        <div style="text-align: center;">
            <canvas height="50px" width="50px" id="canvas"  ></canvas>
        </div>
    </div>
    <!-- <div class="tool">
        <div @click="shareFriend">
            <van-icon name="chat-o" size="30" />
            <p>分享朋友</p>
        </div>
        <div @click="shareFriends">
            <van-icon name="share" size="30" />
            <p>分享朋友圈</p>
        </div>
        <div>
            <van-icon name="close" size="30" />
            <p>保存二维码</p>
        </div>
    </div> -->
    <!-- <div :class="ov ? 'box fixed' :'dn'">
        点击右上角分享
    </div> -->
</div>
</template>

<script>
import wxapi from '@/views/api/wxapi.js'
import wx from 'weixin-js-sdk'
import QRCode from 'qrcode'
export default {
    name: 'share',
    data() {
        return {
            ov:false,
            type: 1,
            userInfo: null,
            storeInfo : null
        }
    },
    
    created() {
        this.userInfo = this.global.state.userInfo;
        this.storeInfo = this.global.state.storeInfo;
        if(this.$route.params.type == 'store'){
            this.type = 2
        }
        // wxapi.wxRegister(this.wxRegCallback)
        // this.getconfig();
    },
    methods: {
        onClickLeft(){
            this.$router.go(-1)
        },
        shareFriend() {
            let params = {};
            params.token = sessionStorage.getItem("token")
            params.url = location.href.split('#')[0];
            this.axios.get('/api/wechatofficial/1/share_config/', {
                params
            }).then((res) => {
                this.configs(res,'Friend')
            }).catch((error) => {
                console.log(error)
            })
        },
        shareFriends(){
            let params = {};
            params.token = sessionStorage.getItem("token")
            this.axios.get('/api/wechatofficial/1/share_config/', {
                params
            }).then((res) => {
                this.configs(res,'Friends')
            }).catch((error) => {
                console.log(error)
            })
        },
        getconfig() {
            let params = {};
            params.token = sessionStorage.getItem("token")
            this.axios.get('/api/wechatofficial/1/share_config/', {
                params
            }).then((res) => {
                console.log(res)
                this.configs(res)
            }).catch((error) => {
                console.log(error)
            })
        },
        configs(res,type) {
            let data = res.data.data;
            let list = [];
            if(type == 'Friend'){
                list = ['updateAppMessageShareData']
            }else {
                list = ['updateTimelineShareData']
            }
            wx.config({
                debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: data.appId, // 必填，公众号的唯一标识
                timestamp: data.timestamp, // 必填，生成签名的时间戳
                nonceStr: data.nonceStr, // 必填，生成签名的随机串
                signature: data.signature, // 必填，签名，见附录1
                jsApiList: data.jsApiList // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            });
            if(type == 'Friend'){
                let option = {
                    title:'分享到朋友圈',
                    desc: '分享到朋友圈', // 分享描述
                    link:'http://ct.xheme.com',
                    imgUrl: 'http://ymshosss.oss-cn-shanghai.aliyuncs.com/IUOhxphp6KCZsV1574166579191119.jpg',
                };
                this.wxShareTimeline(option);
            }else {
                 let option = {
                    title:'分享到朋友',
                    desc: '分享到朋友',
                    link:'http://ct.xheme.com',
                    imgUrl: 'http://ymshosss.oss-cn-shanghai.aliyuncs.com/IUOhxphp6KCZsV1574166579191119.jpg',
                };
                this.wxShareAppMessage(option);
                
            }
        },
        wxShareTimeline(option) {
            // 微信自定义分享到朋友圈
            // 将配置注入通用方法
            wx.ready(function () { //需在用户可能点击分享按钮前就先调用
                wx.updateTimelineShareData({
                    title: option.title, // 分享标题
                    link: option.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: option.link, // 分享图标
                    success: function (res) {
                        // 设置成功
                        console.log(res)
                        alert('设置成功')
                    }
                })
            });

        },
        wxShareAppMessage(option) {
            // 微信自定义分享给朋友
            wx.ready(function () { //需在用户可能点击分享按钮前就先调用
                wx.updateAppMessageShareData({
                    title: option.title, // 分享标题
                    desc: option.desc, // 分享描述
                    link: option.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: '', // 分享图标
                    success: function (res) {
                        alert('设置成功')
                        // 设置成功
                    }
                })
            });
            wx.error(res => {
                console.log(res)
            })
        },
        useqrcode() {
            var canvas = document.getElementById('canvas');
            let url = null;
            if(this.type == 1){
                url = 'http://ct.xheme.com/?parent_id='+this.global.state.userInfo.id;
            }else {
                url = 'http://ct.xheme.com/?parent_id='+this.global.state.userInfo.id;
                console.log(url)
            }
            console.log(url);
            QRCode.toCanvas(canvas, url, function (error) {
                if (error) console.error(error)

            })
        },
    },
    components: {
        QRCode: QRCode,
    },
    mounted() {
        this.useqrcode();
    }
}
</script>

<style scoped>
.warp {
    position: relative;
    height: 100vh;
    width: 100%;
    background: url(http://ymshosss.oss-cn-shanghai.aliyuncs.com/WIXYZphpqfy8Pg1574406144191122.jpg) no-repeat;
    background-size: 100% 100%;
}

.title {
    text-align: center;
    color: white;
}
.title h2 {
    font-weight: 500
}

@media screen and (max-width: 400px){
    #qrCode {
        position: absolute;
        top: 60%;
        left: calc(65%);
        transform: translateY(-30%);
        background: transparent;
        width: 6rem!important;
        height: 6rem!important;
        z-index: 999;
    }
    .user-id {
        position: absolute;
        bottom: 16.5%;
        left: 18%;
        background: transparent;
        z-index: 999;
    }
    #canvas {
        width: 6rem!important;
        height: 6rem!important;
        padding: 0;
    }
}

@media screen and (max-width: 420px) {
    #qrCode {
        position: absolute;
        top: 59.5%;
        left: calc(65%);
        transform: translateY(-30%);
        background: transparent;
        width: 6rem!important;
        height: 6rem!important;
        z-index: 999;
    }
    .user-id {
        position: absolute;
        bottom: 16.5%;
        left: 18%;
        background: transparent;
        z-index: 999;
    }
    #canvas {
        width:  6.62rem!important;
        height:  6.62rem!important;
        padding: 0;
    }
}



.tool {
    margin: 50px 0 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    text-align: center;
}

.tool div p {
    margin: .2rem 0;
}

.img {
    height: 400px;
    width: 60%;
    margin: 0 auto;
}

.box {
    height: 100vh;
    width: 100vh;
    background: rgba(0.0.0.0.4);
    color: white;
    z-index: 100;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
</style>
